<template>
  <div class="button">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="作站任务期望效果" name="first">
        <el-table class="table" :data="tableData1" style="width: 98%" :row-style="{ height: '50px' }"
          :header-cell-style="{ fontSize: '18px', backgroundColor: '#D4E8FD', color: '#333' }"
          :span-method="objectSpanMethod" border>
          <el-table-column prop="name" label="作站任务" width="180"></el-table-column>
          <el-table-column prop="type" label="子任务" width="180"></el-table-column>
          <el-table-column prop="host" label="作站对象" width="280"></el-table-column>
          <el-table-column prop="order" label="作站范围" width="180"></el-table-column>
          <el-table-column prop="date" label="期望效果" width="310"></el-table-column>
          <el-table-column prop="staus" label="期望效果指标" show-overflow-tooltip width="380"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="能力综合效果结果" name="second">
        <el-table class="table" :data="tableData2" tooltip-effect="dark" style="width: 100%" fit
          :row-style="{ height: '50px' }"
          :header-cell-style="{ fontSize: '18px', backgroundColor: '#D4E8FD', color: '#333' }" border
          :span-method="objectspan">
          <el-table-column prop="name" label="综合能力" width="240" show-overflow-tooltip></el-table-column>
          <el-table-column prop="type" label="综合能力指标" width="400"></el-table-column>
          <el-table-column prop="host" label="能力" width="380"></el-table-column>
          <el-table-column prop="order" label="能力指标" width="480"></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first',
      tableData1: [
        {
          name: "制空",
          type: "肃清空域",
          host: "M方空军第1联队第x中队",
          order: "xx区域",
          date: "肃清xx区域的空域",
          staus: "100km2空域范围内36h内无M方军机进入",
        },
        {
          name: "制空",
          type: "压制防空",
          host: "M方xx部队",
          order: "xx区域",
          date: "压制M方xx部队的防空能力",
          staus: "摧毁90%的防空目标",
        }],
      tableData2: [
        {
          name: "机动能力",
          type: "xx小时内xx部队机动到xx区域",
          host: "空中机动能力",
          order: "5小时内完成机动距离1000km",
        },
        {
          name: "机动能力",
          type: "xx小时内xx部队机动到xx区域",
          host: "陆上机动能力",
          order: "12小时内完成机动距离1000km",
        },
        {
          name: "机动能力",
          type: "xx小时内xx部队机动到xx区域",
          host: "海上机动能力",
          order: "24小时内完成机动距离1000km",
        },
        {
          name: "侦察能力",
          type: "采集并获得xx区域范围内M方90%的目标，进实时的动态情报",
          host: "太空侦察能力",
          order: "覆盖范围1000km2，空间分辨率1m，探测手段：光学成像、雷达成像，时效性小于4小时",
        },
        {
          name: "侦察能力",
          type: "采集并获得xx区域范围内M方90%的目标，进实时的动态情报",
          host: "空中侦察能力",
          order: "覆盖范围1000km2，空间分辨率0.5m，探测手段：光学成像、雷达成像，持续时间36小时，时效性不小于15分钟",
          order: "",
        },
        {
          name: "侦察能力",
          type: "采集并获得xx区域范围内M方90%的目标，进实时的动态情报",
          host: "海上侦察能力",
          order: "",
        },
        {
          name: "侦察能力",
          type: "采集并获得xx区域范围内M方90%的目标，进实时的动态情报",
          host: "岸上侦察能力",
          order: "",
        },
        {
          name: "打击能力",
          type: "空中打击能力",
          host: "",
          order: "",
        },
        {
          name: "打击能力",
          type: "海上打击能力",
          host: "",
          order: "",
        },
        {
          name: "打击能力",
          type: "陆上打击能力",
          host: "",
          order: "",
        },
      ],
    };
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    objectspan({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 0) {
          return {
            rowspan: 3,
            colspan: 1,
          };
        }
        else if (rowIndex === 3) {
          return {
            rowspan: 4,
            colspan: 1,
          };
        }
        else if(rowIndex === 7){
          return {
            rowspan: 3,
            colspan: 1,
          };
        }else{
          return{
            rowspan: 0,
            colspan: 0,
          }
        }
      }
      if (columnIndex === 1) {
        if (rowIndex === 0) {
          return {
            rowspan: 3,
            colspan: 1,
          };
        }
        else if (rowIndex === 3) {
          return {
            rowspan: 4,
            colspan: 1,
          };
        }
        else if(rowIndex===7||rowIndex===8||rowIndex==9){
          return {
            rowspan: 1,
            colspan: 1,
          };
        }else{
          return{
            rowspan: 0,
            colspan: 0,
          }
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import url("../font/detail.less");
</style>